/**
 * Created by xiteng on 2017/5/18.
 */
'use strict';
import React, {Component}from 'react';
import {
    View,
    TextInput,
    StyleSheet,
    Platform,
    TouchableOpacity,
    Text
}from 'react-native';
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
import Constant from "../Contant";

export default class SearchBox extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        let {placeholder, textChange, onClick, tintColor = '#fff'} = this.props
        return (
            <TouchableOpacity
                onPress={onClick}
                activeOpacity={1}
                style={[styles.container, {backgroundColor: tintColor,borderRadius:2}]}>
                <View style={styles.inputBox}>
                    <View style={styles.inputIcon}>
                        <FontAwesomeIcon name="search" color="#8B8B90" size={20}/>
                    </View>
                    {
                        onClick == undefined ? (<TextInput
                            editable={onClick && onClick != undefined ? false : true}
                            onChangeText={textChange}
                            style={styles.inputText}
                            underlineColorAndroid="transparent"
                            placeholder={placeholder}>
                        </TextInput>) : (<View>
                            <Text style={{color:Constant.TEXT_COLOR_3}}>{placeholder}</Text>
                        </View>)
                    }
                </View>
            </TouchableOpacity>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: '#fff',
        flexDirection: 'row',
        height: Platform.OS === 'ios' ? 35 : 45,
        borderBottomColor: '#cdcdcd',
        paddingVertical: 5,
        alignItems: 'center'

    },
    inputBox: {
        height: Platform.OS === 'ios' ? 30 : 40,
        marginLeft: 5,
        marginRight: 5,
        flex: 1,
        flexDirection: 'row',
        backgroundColor: '#00000000',
        alignItems: 'center'
    },
    inputIcon: {
        margin: Platform.OS === 'ios' ? 5 : 10,
    },
    inputText: {
        alignSelf: 'flex-end',
        marginTop: Platform.OS === 'ios' ? 0 : 0,
        flex: 1,
        height: Platform.OS === 'ios' ? 30 : 40,
        marginLeft: 2,
        marginRight: 5,
        fontSize: 12,
        lineHeight: 30,
        textAlignVertical: 'bottom',
        textDecorationLine: 'none',
    },

});
